<template>
    <div class="com-cnt">
        <ul class="nav-cnt">
            <li
             class="nav-item"
             v-for="(item, index) in navItems"
             :key="index"
             :class="nowIndex == index ? 'nav-item-cur' : ''"
             @click="updatePage(index)"
            >
                <span class="info">{{item}}</span>
            </li>  
        </ul>
        <fade-animation :fadename="fadename">
            <component :data="comItemData" :is="currentTabComponent"></component>
        </fade-animation>
    </div>
</template>

<script>   
    import FadeAnimation from '@/common/fade/FadeAnimation.vue'
    import AComponent from './component/indexComa.vue'
    import BComponent from './component/indexComb.vue'
    import CComponent from './component/indexComc.vue'
    import axios from 'axios'
    import Qs from 'qs'
    import { maskTips, getCookie } from '@/assets/js/dom'
    export default {
        name: "TravelListPage",
        components: {
            FadeAnimation
        },
        data ( ) {
            return {
                pageNumber: 1,
                nowIndex: 0,
                navItems: ["一日游","二日游","三日游"],
                tabData: [],
                tabObj1: [],                 
                tabObj2: [],                 
                tabObj3: [],
                currentTabComponent: AComponent,
                comItemData: [],
                fadename: 'slide-left'                                
            }
        },
        mounted() {
            this.doAjax()
        },        
        methods: { 
            updatePage ( i ) {
                let temp = this.nowIndex
                this.fadename = i > temp ? 'slide-left' : 'slide-right' 
                this.nowIndex = i 
                if ( i == 0 ) {
                    this.comItemData = this.tabObj1
                    this.currentTabComponent = AComponent
                }           
                if ( i == 1 ) {
                    this.comItemData = this.tabObj2
                    this.currentTabComponent = BComponent
                }           
                if ( i == 2 ) {
                    this.comItemData = this.tabObj3
                    this.currentTabComponent = CComponent
                }           
            },              
            doAjax ( ) {
                let self = this            
                axios({
                    url: '/xshk/f/tour_list',
                    method:'get',
                    headers:{'Content-Type':'application/x-www-form-urlencoded'},
                    data: Qs.stringify({'pageNumber': self.pageNumber,'pageSize': 10})
                }).then( res => {self.handleGetDataSucc( res )}).catch( err => {self.handleGetDataFail( err )})         
            }, 
            handleGetDataSucc ( res ) {
                res = res.data
                let self = this
                if ( res && res.code == 0 ) {
                    let data = res.data.list
                    for ( let i = 0 ; i < data.length; i++ ) {
                        switch ( data[i].type ) {
                            case 1:
                                // self.tabObj1 = Object.assign(self.tabObj1,data[i])
                                self.tabObj1.push(data[i])
                                self.comItemData = self.tabObj1
                            break;
                            case 2:
                                // self.tabObj2 = Object.assign(self.tabObj2,data[i])   
                                self.tabObj2.push(data[i])                        
                            break;                           
                            default: 
                                // self.tabObj3 = Object.assign(self.tabObj3,data[i])
                                self.tabObj3.push(data[i])
                            break; 
                        }
                    }
                    // self.tabData.push(self.tabObj1,self.tabObj2,self.tabObj3)
                }
            },
            handleGetDataFail ( err ) {
                console(err)
                maskTips({id:"axios-tips-fail",txt:'网络通信失败!'})
            }                   
        }
    }
</script>

<style lang="stylus" scoped>
.com-cnt
    width 100%
    height auto 
    overflow hidden
    .nav-cnt
        width 80%
        height 45px
        line-height 45px
        text-align center
        display flex
        margin 0 auto
        background-color #fff
        overflow hidden
        .nav-item 
            flex 1
            position relative
            &:before 
                content ""
                display block
                width 0
                height 2px
                background-color #ffd351
                position absolute
                left 0
                bottom 0
                transition all .5s ease-in-out 
            .info 
                display block 
                width 100%
                height 45px
                line-height 45px
                font-size 16px
                color #999
        .nav-item-cur 
            .info 
                transition all .5s ease-in-out
                color #ffd351
            &:before 
                width 100%     
.swiper-content
    width 100%
    height auto 
    overflow hidden
.img-up-com
    width 100%
    height auto 
    overflow hidden    
    .pic 
        width 100%
        height auto
        display block 
        overflow hidden
        img 
            display block
            width 100%
            margin 0 auto
.info-down-com
    width 100%
    height auto 
    overflow hidden
    .title 
        width 100%
        height 30px
        line-height 35px
        font-size 15px
        color #333
        ellipsis()
    .txt 
        width 100%
        height 23px
        line-height 23px
        font-size 12px
        color red
        ellipsis()
    .num 
        font-size 12px
        color red
        position absolute 
        right 10px
        top 50%
        transform translate(0,-50%)
        .old 
            font-size 11px
            color #999
            font-style oblique
            text-decoration line-through
    .cart 
        position absolute
        right 10px
        bottom 0
        font-size 23px    
</style>